<template>
    <div class="app">
        <h1>{{msg}}</h1>
        <!-- 通过父组件给子组件传递函数类型的props实现: 子给父传递数据-->
        <!--        <StudentInfo v-on:tyl.once="getStudentName"></StudentInfo>-->
        <StudentInfo ref="student"></StudentInfo>
        <hr>
        <SchoolInfo :getSchoolName="getSchoolName"></SchoolInfo>
    </div>

</template>

<!--组件交互相关的代码-->
<script>
    // <!--    引入组件-->
    import SchoolInfo from './components/SchoolInfo'
    import StudentInfo from './components/StudentInfo'

    export default {
        name: 'App',
        data() {
            return {
                msg: 'hello'
            }
        },
        components: {
            StudentInfo,
            SchoolInfo
        },
        methods: {
            getSchoolName(name) {
                console.log('App收到了学校名称:', name)
            },
            getStudentName(name) {
                console.log('App收到了学生名称:', name)
            }
        },
        mounted() {
            setTimeout(() => {
                this.$refs.student.$on('tyl', this.getStudentName)
                // this.$refs.student.$once('tyl', this.getStudentName)

            }, 3000)
        }
    }

</script>

<!--组件的样式-->
<style>
    .app {
        background-color: gray;

    }
</style>
